<template>
	<view>
		<view class="my-head"></view>

		<head-img v-if="headImgShow" />
		<u-transition :show="true" mode="fade-up" duration="500">
			<view class="my-content">
				<view class="my-order">
					<view class="my-order-flex">
						<view class="my-order-title">我的预约</view>
						<navigator open-type="navigate" url="/pages/mine/order/order" hover-class="none">查看全部></navigator>
					</view>
					<view class="my-order-bottom" v-if="!userData.is_teacher">
						<navigator url="/pages/mine/PurchaseRecord/PurchaseRecord?paystate=0" open-type="navigate" class="my-order-bottom-flex">
							<image class="my-order-bottom-img" src="../../static/img/icon1.png" mode="widthFix"></image>
							<view>待支付</view>
							<view v-show="orderInfo.waiting_pay && orderInfo.waiting_pay != 0" class="order_mark_num">{{ orderInfo.waiting_pay }}</view>
						</navigator>
						<navigator url="/pages/mine/order/order?type=2" open-type="navigate" class="my-order-bottom-flex">
							<image class="my-order-bottom-img" src="../../static/img/icon2.png" mode="widthFix"></image>
							<view>预约中</view>
							<view v-show="orderInfo.waiting_service && orderInfo.waiting_service != 0" class="order_mark_num">{{ orderInfo.waiting_service }}</view>
						</navigator>
						<navigator url="/pages/mine/order/order?type=3" open-type="navigate" class="my-order-bottom-flex">
							<image class="my-order-bottom-img" src="../../static/img/icon3.png" mode="widthFix"></image>
							<view>已完成</view>
						</navigator>
						<navigator url="/pages/mine/order/order?type=4" open-type="navigate" class="my-order-bottom-flex">
							<image class="my-order-bottom-img" src="../../static/img/icon4.png" mode="widthFix"></image>
							<view>售后/退款</view>
						</navigator>
					</view>
					<view class="my-order-bottom" v-else>
						<navigator url="/pages/mine/order/order?type=1" open-type="navigate" class="my-order-bottom-flex">
							<image class="my-order-bottom-img" src="../../static/img/icon2.png" mode="widthFix"></image>
							<view>预约中</view>
							<view v-show="orderInfo.waiting_service && orderInfo.waiting_service != 0" class="order_mark_num">{{ orderInfo.waiting_service }}</view>
						</navigator>
						<navigator url="/pages/mine/order/order?type=2" open-type="navigate" class="my-order-bottom-flex">
							<image class="my-order-bottom-img" src="../../static/img/icon3.png" mode="widthFix"></image>
							<view>已完成</view>
						</navigator>
						<navigator url="/pages/mine/order/order?type=3" open-type="navigate" class="my-order-bottom-flex">
							<image class="my-order-bottom-img" src="../../static/img/icon4.png" mode="widthFix"></image>
							<view>退订</view>
						</navigator>
					</view>
				</view>
			</view>
			<!-- <view class="my-content-two">
				<view class="my-order">
					<view class="my-order-flex">
						<view class="my-order-title">购课记录</view>
						<navigator open-type="navigate" url="/pages/mine/PurchaseRecord/PurchaseRecord" hover-class="none">查看全部></navigator>
					</view>
					<view class="my-order-bottom" v-if="!userData.is_teacher">
						<navigator url="/pages/mine/PurchaseRecord/PurchaseRecord?type=1" open-type="navigate" class="my-order-bottom-flex">
							<image class="my-order-bottom-img" src="../../static/img/icon1.png" mode="widthFix"></image>
							<view>待支付</view>
							<view v-show="orderInfo.waiting_pay && orderInfo.waiting_pay != 0" class="order_mark_num">{{ orderInfo.waiting_pay }}</view>
						</navigator>
						<navigator url="/pages/mine/PurchaseRecord/PurchaseRecord?type=2" open-type="navigate" class="my-order-bottom-flex">
							<image class="my-order-bottom-img" src="../../static/img/icon2.png" mode="widthFix"></image>
							<view>预约中</view>
							<view v-show="orderInfo.waiting_service && orderInfo.waiting_service != 0" class="order_mark_num">{{ orderInfo.waiting_service }}</view>
						</navigator>
						<navigator url="/pages/mine/PurchaseRecord/PurchaseRecord?type=3" open-type="navigate" class="my-order-bottom-flex">
							<image class="my-order-bottom-img" src="../../static/img/icon3.png" mode="widthFix"></image>
							<view>已购买</view>
						</navigator>
						<navigator url="/pages/mine/PurchaseRecord/PurchaseRecord?type=4" open-type="navigate" class="my-order-bottom-flex">
							<image class="my-order-bottom-img" src="../../static/img/icon4.png" mode="widthFix"></image>
							<view>售后/退款</view>
						</navigator>
					</view>
					<view class="my-order-bottom" v-else>
						<navigator url="/pages/mine/PurchaseRecord/PurchaseRecord?type=1" open-type="navigate" class="my-order-bottom-flex">
							<image class="my-order-bottom-img" src="../../static/img/icon2.png" mode="widthFix"></image>
							<view>支付中</view>
							<view v-show="orderInfo.waiting_service && orderInfo.waiting_service != 0" class="order_mark_num">{{ orderInfo.waiting_service }}</view>
						</navigator>
						<navigator url="/pages/mine/PurchaseRecord/PurchaseRecord?type=2" open-type="navigate" class="my-order-bottom-flex">
							<image class="my-order-bottom-img" src="../../static/img/icon3.png" mode="widthFix"></image>
							<view>已购买</view>
						</navigator>
						<navigator url="/pages/mine/PurchaseRecord/PurchaseRecord?type=3" open-type="navigate" class="my-order-bottom-flex">
							<image class="my-order-bottom-img" src="../../static/img/icon4.png" mode="widthFix"></image>
							<view>退款</view>
						</navigator>
					</view>
				</view>
			</view> -->
		</u-transition>

		<view class="my-b">
			<u-list height="auto">
				<u-list-item v-if="!userData.is_teacher">
					<navigator open-type="navigate" url="/pages/mine/attestation/attestation" hover-class="none">
						<u-cell title="教师认证"><u-icon slot="icon" name="man-add" size="28"></u-icon></u-cell>
					</navigator>
				</u-list-item>

				<u-list-item v-else>
					<navigator open-type="navigate" url="/pages/mine/wages/wages" hover-class="none">
						<u-cell title="教师工资构成"><u-icon slot="icon" name="rmb-circle" size="25"></u-icon></u-cell>
					</navigator>
				</u-list-item>

				<u-list-item v-for="(item, index) in indexList" :key="index">
					<navigator open-type="navigate" :url="item.url" hover-class="none">
						<u-cell :title="item.title"><u-icon slot="icon" :name="item.img" size="28"></u-icon></u-cell>
					</navigator>
				</u-list-item>

				<u-list-item class="u-list-item">
					<button open-type="contact" bindcontact="handleContact" class="my-b-button">
						<u-cell title="在线客服"><u-icon slot="icon" name="chat" size="28"></u-icon></u-cell>
					</button>
				</u-list-item>
			</u-list>
		
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import uniList from '@/components/components/uni-list/uni-list.vue';
import uniListItem from '@/components/components/uni-list-item/uni-list-item.vue';
// 头像组件
import headImg from '@/components/content/head-img.vue';
export default {
	data() {
		return {
			orderInfo: {},
			// 列表
			indexList: [
				{
					title: '购买记录',
					img: 'order',
					url: '/pages/mine/PurchaseRecord/PurchaseRecord'
				},
				{
					title: '收货地址',
					img: 'order',
					url: '/pages/mine/address/address'
				},
				{
					title: '我的优惠券',
					img: 'red-packet-fill',
					url: '/pages/class/coupon/coupon'
				},
				{
					title: '领券中心',
					img: 'red-packet',
					url: '/pages/mine/couponReceive/couponReceive'
				},
				{
					title: '每日签到',
					img: 'calendar',
					url: '/pages/index/src/signin/signin'
				},
				{
					title: '我的积分',
					img: 'bag-fill',
					url: '/pages/mine/integrate/integrate'
				},
				{
					title: '我的收藏',
					img: 'star-fill',
					url: '/pages/mine/collect/collect'
				}
			],
			// 个人信息
			userData: {},
			headImgShow: true
		};
	},

	onShow() {
		// 如果未登录就先登录
		if (!uni.getStorageSync('userData')) {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		}
		this.userData = uni.getStorageSync('userData');
		switch (false) {
			case !!this.userData.avatarUrl:
			case !!this.userData.nickName:
			case !!this.userData.phoneNumber:
				uni.navigateTo({
					url: '/pages/login/login'
				});
		}
		this.headImgShow = false;
		setTimeout(() => {
			this.headImgShow = true;
		});
	},
	mounted() {},
	computed: {
		static_media() {
			return {
				img01: '/static/img/user-icon1.png',
				img02: '/static/img/user-icon2.png',
				img03: '/static/img/user-icon3.png',
				img04: '/static/img/user-icon4.png'
			};
		}
	},
	components: {
		headImg,
		uniList,
		uniListItem
	},
	methods: {
		clickLogin() {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f8f8f8;
}
.my-head {
	/* background: #6c7df1; */
	/* height: 50px; */
}
.lz-status_bar {
	background-color: #6c7df1;
}
.my-top {
	background: #6c7df1;
	display: flex;
	align-items: flex-start;
	padding: 22px;
	color: #fff;
	font-size: 14px;
	height: 122px;
}
.my-top-img {
	width: 64rpx;
	height: 64rpx;
	border-radius: 50%;
	margin-right: 10rpx;
}

.top-img {
	width: 130rpx;
}
.my-top-title {
	font-size: 16px;
}

.my-top-flex {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	height: 64px;
	justify-content: center;
}

.my-content {
	background: #fff;
	z-index: 9;
	width: 90%;
	margin: 0 auto;
	margin-top: -22px;
	padding: 15px 5px 10px;
	border-radius: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.my-content-two {
	background: #fff;
	width: 90%;
	margin: 0 auto;
	margin-top: 22px;
	padding: 15px 5px 10px;
	border-radius: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.my-b {
	background: #fff;
	width: 93%;
	margin: 0 auto;
	border-radius: 7px;
	margin-top: 13px;
	margin-bottom: 14px;
}
.my-order {
	background: #fff;
	width: 100%;
	margin: 0 auto;
}
.my-order-flex {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
	color: #b7b7b7;
	border-bottom: solid 1px #f5f5f5;
	padding-bottom: 10px;
	margin: 0 13px 0;
}
.my-order-title {
	color: #171717;
	font-size: 16px;
	font-weight: bold;
}
.my-order-bottom-img {
	width: 36px;
	height: 36px;
	margin-bottom: 2px;
}
.my-order-bottom-flex {
	flex: 1;
	position: relative;
	display: flex;
	align-items: center;
	flex-direction: column;
}
.my-order-bottom {
	display: flex;
	align-items: center;
	text-align: center;
	font-size: 13px;
	color: #646464;
	padding: 15px 0 4px;
}
.order_mark_num {
	position: absolute;
	right: 16px;
	top: -2px;
	background: red;
	color: #fff;
	border-radius: 0.32rem;
	border-radius: 3.2vw;
	padding: 0.053333rem 0.093333rem;
	padding: 0.333333vw 1.533333vw;
	font-size: 12px;
}
.iconzixun,
.iconjilu {
	font-size: 26px;
	color: #fff;
	background: #6c7df1;
	width: 44px;
	height: 44px;
	line-height: 44px;
	border-radius: 50%;
	margin-bottom: 6px;
}
.my-b-button {
	width: 100%;
	background: #fff;
	margin: 0;
	padding: 0;
	display: flex;
	border-bottom: 1px solid #d6d7d9;
	.u-line {
		display: none;
	}
}
.my-b-button::after {
	border: none;
}
</style>
